<template>
  <div class="clinic-details" v-if="details">
    <van-nav-bar
      left-text="返回"
      title="爱尔眼科"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main" v-for="item in details" :key="item.details_id">
      <h4 class="title">{{ item.title }}</h4>

      <div class="date">
        <van-divider
          >{{ moment(item.time).format("YYYY年MM月DD日") }}
        </van-divider>
      </div>
      <div class="article" v-html="item.content"></div>
    </div>

    <user-collect></user-collect>
    <div class="com-box">
      <van-divider>评论区 </van-divider>

      <div class="comment" v-for="item in commentList" :key="item.id">
        <div class="avatar">
          <img :src="`/img/${item.avatar}`" alt="" />
        </div>
        <div class="user">
          <p>{{ item.nickName }}</p>
          <span>{{ item.comment }}</span>
          <div class="date-del">
            <p>{{ moment(item.date).format("YYYY年MM月DD日") }}</p>
            <p
              v-if="userID == item.userid"
              class="del"
              @click="delComment(item.id)"
            >
              删除
            </p>
          </div>
        </div>
      </div>

      <van-empty
        image-size="100%"
        v-if="commentList.length == 0"
        class="custom-image"
        image="/clinic/comment.png"
        description="暂无评论"
      />
    </div>
    <van-field
      label-width="3em"
      v-model="content"
      center
      clearable
      label="评论"
      placeholder="请输入评论内容~"
    >
      <template #button>
        <van-button size="small" type="primary" @click.native="sendComment()"
          >发送</van-button
        >
      </template>
    </van-field>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import UserCollect from "./UserCollect.vue";
export default {
  components: { UserCollect },
  data() {
    return {
      details: null,
      pageID: 0,
      // isStart: false,
      // isEnd: false,
      content: "",
      commentList: "",
      userID: null,
    };
  },
  computed: {
    ...mapState("user", [
      "loginStatus",
      "userInfo",
      "urlSrcAdd",
      "urlSrcDefaul",
    ]),
    ...mapState("artical", ["gocollect"]),
  },
  mounted() {
    this.userID = this.userInfo.userid;
    this.pageID = this.$route.query.id;
    this.getDate();
    this.getComment();
    console.log("111", this.commentList);
  },
  watch: {
    pageID(newValue, oldValue) {
      this.getComment();
    },
  },

  methods: {
    ...mapMutations("artical", ["setgocollect"]),
    getDate(type) {
      let url = `clinicDetail/details_id?details_id=${this.pageID}`;
      this.axios.get(url).then(res => {
        if (res.data.code != 501) {
          console.log(1111);
          this.setgocollect(res.data[0].details_id);
          // this.gocollect = res.data[0].details_id;
          this.details = res.data;
          this.isEnd = false;
          this.isStart = false;
        } else {
          if (type == 1) {
            this.isEnd = true;
            this.isStart = false;
            this.pageID--;
          } else {
            this.isStart = true;
            this.isEnd = false;
            this.pageID++;
          }
          // Notify({ type: 'primary', message: '通知内容' });
        }
        // console.log(this.details);
      });
    },
    getComment() {
      let url = `clinicComment/getById?id=${this.pageID}`;

      this.axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.commentList = res.data.data;
        } else {
          this.commentList = [];
        }
        // console.log(this.commentList);
      });
    },
    delComment(id) {
      let url = `clinicComment/${id}`;

      this.axios.get(url).then(res => {
        this.getComment();
      });
    },
    sendComment() {
      let url = `clinicComment/addComment`;
      let params = {
        userid: this.userID, //暂时写死
        comment: this.content,
        date: this.moment(new Date()).format("YYYY-MM-DD"),
        details_id: parseInt(this.pageID),
      };
      if (params.userid == null) {
        this.$dialog.alert({
          message: "请先登录~~~",
        });
        this.content = "";
        return;
      }

      this.axios.post(url, params).then(res => {
        this.getComment();
        this.content = "";
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.clinic-details {
  .van-nav-bar__title {
    color: #fff;
  }
  height: 100%;
  .van-nav-bar {
    background-color: #36c14c;
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .main {
    padding: 15px;
    .article {
      background-color: #fff;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0px 20px 80px rgb(0 0 0 / 10%);
    }

    > .title {
      box-shadow: 0px 20px 80px rgb(0 0 0 / 10%);
      background: #fff;
      color: #666;
      border: rgba(0, 85, 165, 0.1) 1px solid;
      border-left: rgba(113, 186, 56, 1) 6px solid;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.8em;
      margin-bottom: 18px;
      padding: 12px 24px;
      // margin-top: 10px;
    }
    .van-divider {
      border-color: #aaa;
    }
    > .article {
      font-size: 14px;
      text-indent: 28px;
      > p {
        margin: 8px;
      }
    }
    > .page {
      display: flex;
      justify-content: space-around;
      > span {
        background-color: #59cc6b;
        color: #fff;
        padding: 10px 40px;
        border-radius: 8px;
        margin: 60px 0px;
        cursor: pointer;
        user-select: none;
      }
    }
  }
  .com-box {
    margin-bottom: 65px;
    .van-divider {
      color: #59cc6b;
      font-size: 15px;
    }
  }
  .comment {
    display: flex;
    margin: 10px;
    box-shadow: 0px 20px 80px rgb(0 0 0 / 10%);
    padding: 10px 5px;
    > .avatar {
      width: 56px;
      > img {
        width: 70%;
        display: block;
        border-radius: 50%;
        padding: 10px 5px;
      }
    }
    > .user {
      display: flex;
      flex-direction: column;
      width: 80%;
      > p {
        font-weight: bold;
        color: #555555;
      }
      > span {
        padding: 10px 0;
        font-size: 14px;
        color: #615c55;
      }
      > .date-del {
        display: flex;
        justify-content: space-between;
        > p {
          font-size: 12px;
          color: #aaa;
          padding: 5px 0;
        }
        > .del {
          color: #59cc6b;
        }
      }
    }
  }
  .van-cell--center {
    position: fixed;
    bottom: 0;

    .van-field__body .van-field__control {
      background-color: #eee;
      padding: 5px 10px;
    }
  }
}
</style>
